ASP NET - Server Controls - Controles de servidor

Tipos de Controles

Pensando do lado do servidor (Server Side) temos 2 tipos de controles em ASP NET :

1-Nativos do Próprio HTML - Chamados de 'HTML Server Controls'. São as tags HTML em si.

2-Adicionados pelo ASP NET - Chamados de 'Web Server Controls'. São os controles ASP NET como um gridview que é implementado por uma tag table na página renderizada.

Controles ASP NET - HTML Server Controls

Se você conhece HTML conhece estes controles. Se você esta utilizando o Visual Studio selecione a aba 'HTML' da Caixa de Ferramentas e terá acesso a estes controles. São eles :

Tags Input - Entrada de dados :

São as tags que permitem o usuário digitar dados que posteriormente podem ser enviados ao servidor ou disparar um evento que fará um tratamento das informações da página.

Input tipo botão:
Button - Ao ser clicado dispara um evento chamado 'onClick' e este evento pode disparar um processo na página. Exemplo:

Reset - Limpa todos as caixas de texto do form corrente da página. Exemplo :
Importante: Limpa as tags input do form, portanto deve haver um form para este botão funcionar.

Preencha as caixas de texto abaixo e clique neste botão.

Submit - Envia o conteúdo dos inputs da página corrente ao servidor. Note que é um processo NÃO ASP NET ( normalmente CGI) e por este motivo o ASP NET não controla o evento disparado por este botão.
Exemplo :
Nota : O envio de dados a um servidor lógicamente precisa de um servidor e não é o intuito desta página enviar arquivos ao servidor. Sendo assim o botão acima não irá funcionar como faria normalmente porque alguns de seus parâmetros não foram definidos ( como o action do form ).

Input tipo Texto :
Input(Text) : Permitem que o usuário digite texto no seu interior normalmente uma linha e pouca coisa. Exemplo:

TextArea : Permite que o usuário digite texto no seu interior mas uma área maior que uma linha, multilinhas. Exemplo:
Nota : TextArea é uma tag e não input type='textarea'.

Inputs especiais :
Input(File) - Seleção de um arquivo local para futuro envio do arquivo ao servidor - Veja File Upload. Exemplo:

Input(Password) - Permite que o usuário digite um texto mas ele é exibido como senha, ou seja, cada caracter será exibido como '#' ou '.'. Exemplo:

Input(Hidden) - Pode armazenar um texto mas não é exibido ao usuário nem pode ser alterado pelo usuário ( a menos que ele entre no código da página e faça alterações). O objetivo desse controle é armazenar informações que serão enviadas com as demais informações da página. Bom para evitar processos 'server side' mas não muito seguro. Exemplo: ( eu disse que é escondido ?)

Input de Opções : Input(CheckBox) - Permite que o usuário clique e selecione o item ou clique e NÃO selecione o item. Exemplo:

Tags Exibição e Leiaute :

Table, Image, Select, Horizontal Rule, Div.

Na documentação do framework temos a definição dos seguintes controles HTML :

Controle ASP NETControle HTML
HtmlAnchor<a>
HtmlButton<button>
HtmlForm<form>
HtmlHead<head>
HtmlImage<img>
HtmlInputButton<input type=“button”>
HtmlInputCheckBox<input type=“checkbox”>
HtmlInputFile<input type=“file”>
HtmlInputHidden<input type=“hidden”>
HtmlInputImage<input type=“image”>
HtmlInputPassword<input type=“password”>
HtmlInputRadioButton<input type=“radio”>
HtmlInputReset<input type=“reset”>
HtmlInputSubmit<input type=“submit”>
HtmlInputText<input type=“text”>
HtmlLink<link>
HtmlMeta<meta>
HtmlSelect<select>
HtmlTable<table>
HtmlTableCell<td>
HtmlTableRow<tr>
HtmlTextArea<textarea>
HtmlTitle<title>

Portanto, ao usar o controle ASP NET da coluna da esquerda da tabela acima este será renderizado e enviado para o cliente como sendo o hmtl da coluna da direita da tabela acima.

Aí fica uma questão...Qual a vantagem de usar o controle ASP NET em relação a tag HTML ?. O motivo é simples, quando precisamos ter no elemento um valor dinâmico, ou seja, que mude de acordo com o código ASP NET desejado. Quando não precisa a gente usa HTML simples mesmo.

Vou citar um exemplo...ao usar um controle ASP NET complexo, ou seja, NÃO HMTL puro, como um menu do ASP NET o ASP NET renderiza todos seus controles ( inclusive o menu ) em em HTML puro para ser enviado ao cliente, mas não numa única tag mas sim como todos nós faríamos um menu em HTML...usando as tags ul e li junto com uma css de formatação. A vantagem do controle ASP NET em relação ao HTML puro é que o ASP NET faz tudo automaticamente ( ou quase tudo ) enquanto que no HTML você tem que fazer tudo na mão .

Controles ASP NET - Web Server Controls

A interface ASP NET feita no Visual Studio visa dar produtividade ao desenvolvimento web e para acelerar o desenvolvimento o ASP NET implementou um 'superset' do conjunto de controles HTML através de componentes ASP NET facilitando seu uso, configuração e leioute.

Com eles você não precisa se lembrar de tudo que há no html, utilizando o controle ASP NET você tem um painel de propriedades que 'traduz' e encaminha você até o parâmetro correto do controle.

Os controles ASP NET são pequenos blocos de construção da interface gráfica do usuário, que incluem caixas de texto, botões, caixas de seleção, caixas de listagem, etiquetas e várias outras ferramentas.
Usando essas ferramentas, os usuários podem inserir dados, fazer seleções e indicar suas preferências.

Os controles também são usados ​​para trabalhos estruturais, como validação, acesso a dados, segurança, criação de páginas mestras e manipulação de dados.

Para facilitar a vida do desenvolvedor os controles ASP NET foram separados por finalidade na 'Caixa de Ferramentas' do Visual Studio. Temos os controles comuns (Geral), os de acesso a dados, Controles do AJAX, Controles de Navegação, etc.

Em uma página ASP NET comum podemos ter um leque impressionante de controles. Alguns puro HTML, outros containers de outras tags.

Como estes controles são muitos eles foram separados por finalidade. Temos os controles:

1-Padrão : Controles do Servidor ASP NET - Aba Padrão
São os controles ASP NET mais utilizados presentes na caixa de ferramentas do Visual Studio, item Padrão.
São os controles ASP NET Server Side(runat="server").

2-Dados (Aba Dados) : São os controles que visam exibir ou trabalhar dados vindos de qualquer fonte de dados.
O conteúdo vindo do banco de dados é 'formatado' pelo controle dando a ele versatilidade do tipo trocar as colunas de posição ou ordenar por uma certa coluna que o usuário escolhe dentro do componente.

Outro grande feito destes componentes é a paginação de dados. Sabemos que para uma página ficar boa de design não devemos exibir mais que 50 registros por página senão, muitas vezes, fica um monte de dados que é bastante custoso para o servidor trazer e processar. Portanto se pudessemos 'paginar' os dados de 50 em 50 registros seria bom. Pois é, tem componentes desta categoria que fazem isso e de uma maneira bem simples tanto na programação como na interação com o usuário.

Os componentes de dados são:

# Componente Funcionalidade Exemplo
2.1 Chart Desenha um gráfico de barras com os dados recebidos
2.2 DataList O elemento .NET mais simples para listar dados
2.3 DataPager
2.4 DetailsView
2.5 EntityDataSource
2.6 FormView
2.7 GridView Exibe uma coleção de dados vindos de uma base de dados com aparência semelhante ao Excel(Colunas e linhas.
2.8 LinqDataSource
2.9 ListView
2.10 ObjectDataSource
2.11 QueryExtender
2.12 Repeater
2.13 SiteMapDataSource
2.14 SqlDataSource
2.15 XMLDataSource

Estes componentes são chaves em qualquer site ASP NET portanto aconselho a dar uma olhada com carinho em cada um deles, especialmente o GridView, DataList e o Repeater.

3-Validação : São os controles que fazem a validação das informações digitadas pelo usuário antes de serem enviadas ao servidor.
No site existem 6 documentos sobre validadores :
1-Resumo de todos validadores
2-Validação por Comparação - Compare Validator
3-Validação por faixa de valores - Range Validator
4- Validação de Campo obrigatório - Required Field Validator
5-Validação Personalizada - Custom Validator
6- Validação por Expressão Regular - Regular Expression Validator

4-Navegação : São controles que criam menus, barras de navegação e visam deslocar o foco de um ponto atual para outro na mesma página, em outra página dentro do servidor ou mesmo em uma página em outro servidor.

5-Logon : Se você necessita validar os usuários para terem acesso a pontos chaves do seu site este conjunto de componentes é uma mão na roda.

6-Web Parts : São componentes que acertam a comunicação do nosso servidor com outros, como serviço de proxy entre outros.
São muito pouco usados mas tem ganhado terreno em aplicações na nuvem que passam por autenticação de diversos agentes externos ao ambiente da aplicação.

7-Extensões Ajax : Assim como o bootstrap está em todas o Ajax e o JQuery estão também.
São um conjunto de funcionalidades que agregam muito a nossa aplicação a um custo baixissimo tanto na transferência ( uns 50kb ) como na praticidade de sua utilização.

O Ajax permite acesso ao servidor Web via xmlHttpRequest, ou seja, permite solicitar a troca de informações com o servidor de maneira assincrona ( sem aguardar ) e assim que as informações estiverem prontas a página ter seu conteúdo parcialmente alterado o que costuma ser mais rápido que submeter e renderizar toda a página novamente via ASP NET. A desvantagem é que é tudo feito em JavaScript, ou seja, o servidor web ASP NET não tem qualquer conhecimento sobre o que o AJAX está fazendo e, por exemplo, se um controle tiver seu conteúdo ou campos adicionados pelo AJAX o ASP NET não irá 'enxergar' esses novos campos.

Uma coisa que funciona muito bem é fazer o uso do AJAX e a resposta do servidor já vem formatada certinha em HTML como o conteúdo do innerHtml do elemento a ser alterado. Como é assincrono se demorar o usuário tem a oportunidade de navegar para outra página...se chegar a informação em tempo ela é exibida rapidamente.

Se você iniciou um novo projeto web que não seja em branco as extensões do AJAX e BootStrap já são instaladas por default no projeto.

Caso você precise adicionar o AJAX ao seu projeto a maneira correta a fazer é :
1-Selecione o menu 'Ferramentas', 'Gerenciador de Pacotes do Nuget', 'Gerenciar Pacotes do Nuget para a Solução...'. Na caixa 'Pesquisar' digite 'Ajax', 'JQuery', 'BootStrap', o que quizer adicionar. Clique na ferramenta selecionada na caixa de objetos encontrados e a seguir no botão 'Instalar'. O Visual Studio, para esta solução, fará todas as modificações na aplicação para que o pacote funcione perfeitamente.

Caso queira estudar a ferramenta AJAX neste site há uma parte dele dedicada a isso. Clique aqui

8-Dados Dinâmicos : São componentes que fazem a interface com certas fontes de informação e com isso permitem criar hiperlinks dinâmicos, filtros dinâmicos, etc.

9-HTML : São os controles comuns HTML.
Como input type text, textbox, etc.
São os controles presente na caixa de ferramentas do Visual Studio, item HTML.

10-Controles do Servidor HTML
Como o submit / postback de um form.
São os controles do lado do servidor que são prestados por serviços externos ao servidor web como, por exemplo, o servidor CGI. Estes controles, não usam os serviços do Servidor ASP NET mas podem usar serviços externos ao servidor web como acesso ao SQL Server, Servidor de Email, CGI, etc.

Combinando os controles e os serviços web

Ao incluirmos um controls ASP NET a nossa página simplesmente clicando na barra de ferramentas e arrastando para a nossa página o visual studio trata automaticamente de alguns detalhes necessários para o controle funcionar o que em outras linguagens demandariam tempo de desenvolvimento e com isto menor produtividade. Por exemplo se o controle é um calendário ele formata tudo computando a data atual, dias da semana, etc...para que ele seja exibido perfeitamente na página e para que suas funcionalidades funcionem perfeitamente em qualquer browser.

Do lado do desenvolvedor a interface de desenvolvimento no Visual Studio ou Visual Studio Code possui uma caixa para gerenciar as propriedades desses objetos como cores, cores de fundo, tamanho de letras e isto facilita muito porque dentro de um ambiente eu estou definindo o HTML, CSS, Scripts...tudo integrado.

Quando adicionamos um controle ASP NET e utilizamos a tag runat-server o ASP NET envia esse controle como uma tag html comum acrescentando a ela, se necessário, algum script, automaticamente, sem que o desenvolvedor tenha que escrever uma linha sequer, para que esse controle funcione perfeitamente.

O exemplo clássico desse controle ASP NET é o Calendário. Veja abaixo como ele é exibido:

Automaticamente o Visual Studio colocou na página:

<table id="Calendar1" cellspacing="0" cellpadding="2" title="Calendário" style="border-width:1px;border-style:solid;border-collapse:collapse;">
<tr>
<td colspan="7" style="background-color:Silver;">

<table cellspacing="0" style="width:100%;border-collapse:collapse;">
                <tr>
<td style="width:15%;"><a href="javascript:__doPostBack('Calendar1','V7671')" style="color:Black" title="Ir para o mês anterior"><</a></td>
<td align="center" style="width:70%;">fevereiro de 2021</td>
<td align="right" style="width:15%;"><a href="javascript:__doPostBack('Calendar1','V7730')" style="color:Black" title="Ir para o mês seguinte">></a></td>
</tr>
            </table>
</td>
</tr>
<tr>
<th align="center" abbr="domingo" scope="col">dom</th>
<th align="center" abbr="segunda-feira" scope="col">seg</th>
<th align="center" abbr="terça-feira" scope="col">ter</th>
<th align="center" abbr="quarta-feira" scope="col">qua</th>
<th align="center" abbr="quinta-feira" scope="col">qui</th>
<th align="center" abbr="sexta-feira" scope="col">sex</th>
<th align="center" abbr="sábado" scope="col">sáb</th>
</tr>
<tr>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7701')" style="color:Black" title="31 de janeiro">31</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7702')" style="color:Black" title="1 de fevereiro">1</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7703')" style="color:Black" title="2 de fevereiro">2</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7704')" style="color:Black" title="3 de fevereiro">3</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7705')" style="color:Black" title="4 de fevereiro">4</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7706')" style="color:Black" title="5 de fevereiro">5</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7707')" style="color:Black" title="6 de fevereiro">6</a></td>
</tr>
<tr>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7708')" style="color:Black" title="7 de fevereiro">7</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7709')" style="color:Black" title="8 de fevereiro">8</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7710')" style="color:Black" title="9 de fevereiro">9</a></td>    
<td align="center" style="color:White;background-color:Silver;width:14%;"><a href="javascript:__doPostBack('Calendar1','7711')" style="color:White" title="10 de fevereiro">10</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7712')" style="color:Black" title="11 de fevereiro">11</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7713')" style="color:Black" title="12 de fevereiro">12</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7714')" style="color:Black" title="13 de fevereiro">13</a></td>
</tr>
<tr>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7715')" style="color:Black" title="14 de fevereiro">14</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7716')" style="color:Black" title="15 de fevereiro">15</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7717')" style="color:Black" title="16 de fevereiro">16</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7718')" style="color:Black" title="17 de fevereiro">17</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7719')" style="color:Black" title="18 de fevereiro">18</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7720')" style="color:Black" title="19 de fevereiro">19</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7721')" style="color:Black" title="20 de fevereiro">20</a></td>
</tr>
<tr>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7722')" style="color:Black" title="21 de fevereiro">21</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7723')" style="color:Black" title="22 de fevereiro">22</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7724')" style="color:Black" title="23 de fevereiro">23</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7725')" style="color:Black" title="24 de fevereiro">24</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7726')" style="color:Black" title="25 de fevereiro">25</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7727')" style="color:Black" title="26 de fevereiro">26</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7728')" style="color:Black" title="27 de fevereiro">27</a></td>
</tr>
<tr>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7729')" style="color:Black" title="28 de fevereiro">28</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7730')" style="color:Black" title="1 de março">1</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7731')" style="color:Black" title="2 de março">2</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7732')" style="color:Black" title="3 de março">3</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7733')" style="color:Black" title="4 de março">4</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7734')" style="color:Black" title="5 de março">5</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7735')" style="color:Black" title="6 de março">6</a></td>
</tr>
<tr>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7736')" style="color:Black" title="7 de março">7</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7737')" style="color:Black" title="8 de março">8</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7738')" style="color:Black" title="9 de março">9</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7739')" style="color:Black" title="10 de março">10</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7740')" style="color:Black" title="11 de março">11</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7741')" style="color:Black" title="12 de março">12</a></td>
<td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','7742')" style="color:Black" title="13 de março">13</a></td>
</tr>
</table>

Tem até um scriptzinho na página:

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>

E o mais legal não é o código acima mas sim que ele é gerado dinâmicamente pelo servidor, ou seja, amanhã terá outro conteúdo, mês que vem também, ano que vem também e o desenvolvedor não precisa se preocupar com nada desta funcionalidade.

Note que ao clicar em qualquer dia da data será dado um postback na página para que o dia selecionado seja carregado no controle como dia selecionado. Todo o código do calendário como o que está por traz disso é o servidor e o ASP NET que controlam, o desenvolvedor / usuário apenas usam.

Se você conhece AJAX sabe que há uma vantagem inerente as linguagens de script: Não é necessário enviar a página ao servidor nem recarregar a página. Contudo JavaScript nem sempre é uma das linguagens mais produtivas em web.

Os controles do servidor ASP.NET (3) são os controles principais usados ​​no ASP.NET. Esses controles podem ser agrupados nas seguintes categorias:

Categorias dos controles ASP NET

1-Controles de validação - São usados ​​para validar a entrada do usuário e funcionam executando o script do lado do cliente.
São eles :
1-CompareValidator : Compara o valor digitado com um padrão e decide se é válido ou não. Por exemplo, posso verificar se o dado digitado é numérico, texto, se é uma data, etc.
2-RangeValidator : Verifica se o dado digitado esta numa faixa de valores que pode ser numérica, alfabética entre outras opções.
3-RegularExpressionValidator : Verifica o dado utilizando uma expressão regular e verifica se o dado esta no formato desejado como, por exemplo, uma data dd/mm/aaaa ou um CPF.
4-RequiredFieldValidator : Verifica se o campo não foi deixado vazio.
ValidationSummary : É onde a mensagem da validação será exibida se este item for incluido na página. Podemos exibir mensagens caso um dado não passe na validação.
A validação é muito útil. Antigamente a gente fazia isso no braço com JavaScript.

2-Controles da fonte de dados - Esses controles fornecem ligação de dados a diferentes fontes de dados.

3-Controles de exibição de dados ou Dados Dinâmicos - Esses controles permitem listar ou preencher tabelas com dados que podem vir diretamente a fontes de dados como os bancos de dados SQL Server, Excel ou Access.
Além da exibição alguns controles permitem implementar funcionalidades como Inserção, Edição, Eliminação ou Atualização dos dados.
Os controles de exibição de dados dinâmicos são :

DynamicControl
DinamicDataManager
DynamicEntity
DynamicFilter
DynamicHyperlink
DinamicValidator

4-Controles de personalização - São usados ​​para personalizar uma página de acordo com as preferências do usuário, com base nas informações do usuário.

5-Controles de logon e segurança - Esses controles fornecem autenticação do usuário.

6-Páginas mestras - Esses controles fornecem layout e interface consistentes em todo o aplicativo.

7-Controles de navegação - Esses controles ajudam na navegação. Por exemplo, menus, exibição em árvore etc. São eles:

1-Menu : Exibe um menu que são links mas ao passar o cursor do mouse neles, se o menu tiver sub-menus, os itens do sub-menu serão exibidos. Estes efeitos são todos feitos em css.
Exemplo:
      <asp:menu id="NavigationMenu" staticdisplaylevels="2" runat="server">
        
        <staticmenuitemstyle backcolor="LightBlue" forecolor="Black"/>
        <statichoverstyle backcolor="LightSkyBlue"/>
        <dynamicmenuitemstyle backcolor="lightgreen" forecolor="Brown"/>
        <dynamichoverstyle backcolor="LightSkyBlue" forecolor="Black"/>
      
        <items>
          <asp:menuitem navigateurl="Home.aspx" text="Home" tooltip="Home">
            <asp:menuitem navigateurl="Music.aspx" text="Music" tooltip="Music">
              <asp:menuitem navigateurl="Classical.aspx" text="Classical" tooltip="Classical"/>
              <asp:menuitem navigateurl="Rock.aspx" text="Rock" tooltip="Rock"/>
              <asp:menuitem navigateurl="Jazz.aspx" text="Jazz" tooltip="Jazz"/>
            </asp:menuitem>
            <asp:menuitem navigateurl="Movies.aspx" text="Movies" tooltip="Movies">
              <asp:menuitem navigateurl="Action.aspx" text="Action" tooltip="Action"/>
              <asp:menuitem navigateurl="Drama.aspx" text="Drama" tooltip="Drama"/>
              <asp:menuitem navigateurl="Musical.aspx" text="Musical" tooltip="Musical"/>
            </asp:menuitem>
          </asp:menuitem>
        </items>
      </asp:menu>

SiteMap : É uma tira de texto que exibe onde você esta de acordo com a url do site e um arquivo xml que transcreve a url para algo mais amigável.

TreeView : Exibe uma árvore de elementos indicando a navegação entre as páginas do site.

8-Controles avançados - Esses controles implementam recursos especiais. Por exemplo, AdRotator, FileUpload e controle de calendário.

Como disse anteriormente acima, esses controles ao serem enviados para o cliente são enviados como html convencional adicionando scripts, CSS e o que for necessário para fazer o que precisam fazer.
Note que controles complexos, como o Calendário, possuem uma integração nativa feita automaticamente pelo ambiente de desenvolvimento que envia tudo que o controle precisa para funcionar de maneira automatica sem que o programador precise escrever uma linha de código.

A sintaxe para usar os controles do servidor é:
    <asp: controlType ID="ControlID" runat="server" Propriedade1=valor1 [Propriedade2=valor2] />

Além disso, o visual studio possui os seguintes recursos, para ajudar a produzir codificação sem erros:
   •  Arrastar e soltar controles no modo de design
   • Recurso IntelliSense que exibe e preenche automaticamente as propriedades
   • A janela de propriedades para definir os valores da propriedade diretamente.

Propriedades dos controles do servidor

Os controles do servidor ASP.NET com um aspecto visual são derivados da classe WebControl e herdam todas as propriedades, eventos e métodos dessa classe.

A própria classe WebControl e alguns outros controles de servidor que não são renderizados visualmente são derivados da classe System.Web.UI.Control. Por exemplo, controle PlaceHolder ou controle XML.

Os controles do servidor ASP.Net herdam todas as propriedades, eventos e métodos da classe WebControl e System.Web.UI.Control.

A tabela a seguir mostra as propriedades herdadas, comuns a todos os controles do servidor:
Propriedade Descrição
AccessKey Ao pressionar a tecla designada com a tecla Alt move o foco para o controle.
Attributes É a coleção de atributos arbitrários (somente para renderização) que não correspondem às propriedades no controle.
BackColor Cor de fundo.
BindingContainer O controle que contém a ligação de dados deste controle.
BorderColor Cor da borda.
BorderStyle Estilo da borda.
BorderWidth Largura da borda.
CausesValidation Indica se o controle aciona a validação.
ChildControlCreated Indica se os controles filho do controle do servidor foram criados.
ClientID ID de controle ClientID para marcação HTML.
Context O objeto HttpContext associado ao controle do servidor.
Controls Coleção de todos os controles contidos no controle.
ControlStyle O estilo do controle do servidor Web.
CssClass Classe da CSS atribuida ao controle
DataItemContainer Obtém uma referência ao contêiner de nomes se o contêiner de nomes implementa IDataItemContainer.
DataKeysContainer Obtém uma referência ao contêiner de nomes se o contêiner de nomes implementa IDataKeysControl.
DesignMode Indica se o controle está sendo usado em uma superfície de design.
DisabledCssClass Obtém ou define a classe CSS a ser aplicada ao elemento HTML renderizado quando o controle está desabilitado.
Enabled Indica se o controle está acessível ou não (Não = acinzentado).
EnableTheming Indica se o tema se aplica ao controle.
EnableViewState Indica se o EnableViewState do controle esta habilitado (Veja ViewState).
Events Fornece uma lista de eventos que estão associados ao controle.
Font Fonte de letra (tipo,tamanho, estilo,cor, cor do fundo, etc...)
Forecolor Cor das letras (de primeiro plano).
HasAttributes Indica se o controle possui atributos definidos.
HasChildViewState Indica se os controles filho do controle de servidor atual têm alguma configuração salva do estado de exibição.
Height Altura pode ser em pixels ou %.
ID Identificador do controle (deve ser único).
IsChildControlStateCleared Indica se os controles contidos nesse controle têm um estado de controle.
IsEnabled Obtém o estado do controle se está ativado (true) ou não (false).
IsTrackingViewState Indica se o controle do servidor está salvando alterações no seu estado de exibição.
IsViewStateEnabled Indica se o estado de exibição está ativado para este controle.
LoadViewStateById Indica se o controle participa do carregamento de seu estado de exibição por ID, em vez de índice.
Page Página que contém o controle.
Parent Controle pai (antecessores).
RenderingCompatibility Especifica a versão do ASP.NET com a qual o HTML renderizado será compatível.
Site O contêiner que hospeda o controle atual quando renderizado em uma superfície de design.
SkinID Obtém ou define o skin (capa) para aplicar ao controle.
Style Obtém uma coleção de atributos de texto que serão renderizados como um atributo de estilo na marca externa do controle do servidor Web.
TabIndex Obtém ou define o índice da guia do controle do servidor Web.
TagKey Obtém o valor HtmlTextWriterTag que corresponde a este controle de servidor Web.
TagName Obtém o nome da marca de controle.
TemplateControl O modelo que contém esse controle.
TemplateSourceDirectory Obtém o diretório virtual da página ou controle que contém esse controle.
ToolTip Obtém ou define o texto exibido quando o ponteiro do mouse passa o mouse sobre o controle do servidor web.
UniqueID Identificador exclusivo.
ViewState Obtém um dicionário de informações de estado que salva e restaura o estado de exibição de um controle de servidor em várias solicitações para a mesma página.
ViewStateIgnoreCase Indica se o objeto StateBag não diferencia maiúsculas de minúsculas.
ViewStateMode Obtém ou define o modo de estado de exibição desse controle.
Visible Indica se um controle de servidor está visível.
Width Obtém ou define a largura do controle do servidor Web.

Métodos dos controles do servidor

A tabela a seguir fornece os métodos dos controles do servidor:
Método Descrição
AddAttributesToRender Adiciona atributos e estilos HTML que precisam ser renderizados no HtmlTextWriterTag especificado.
AddedControl Chamado depois que um controle filho é adicionado à coleção Controls do objeto de controle.
AddParsedSubObject Notifica o controle do servidor que um elemento, XML ou HTML, foi analisado e adiciona o elemento à coleção de controle do controle do servidor.
ApplyStyleSheetSkin Aplica as propriedades de estilo definidas na folha de estilos da página ao controle.
ClearCachedClientID Infraestrutura. Define o valor armazenado em cache ClientID como nulo.
ClearChildControlState Exclui as informações do estado de controle dos controles filho do controle do servidor.
ClearChildState Exclui as informações de estado de exibição e estado de controle de todos os controles filho do controle do servidor.
ClearChildViewState Exclui as informações do estado de exibição de todos os controles filho do controle do servidor.
CreateChildControls Usado na criação de controles filho.
CreateControlCollection Cria um novo objeto ControlCollection para manter os controles filho.
CreateControlStyle Cria o objeto de estilo usado para implementar todas as propriedades relacionadas ao estilo.
DataBind Vincula uma fonte de dados ao controle do servidor e a todos os seus controles filho.
DataBind (Boolean)Vincula uma fonte de dados ao controle do servidor e todos os seus controles filho com uma opção para aumentar o evento DataBinding.
DataBindChildren Vincula uma fonte de dados aos controles filho do controle do servidor.
Dispose Permite que um controle de servidor execute a limpeza final antes de ser liberado da memória.
GuaranteChildControls Determina se o controle do servidor contém controles filho. Caso contrário, ele cria controles filho.
GuaranteID Cria um identificador para controles que não têm um identificador.
Equals(Object) Determina se o objeto especificado é igual ao objeto atual.
Finalize Permite que um objeto tente liberar recursos e executar outras operações de limpeza antes que o objeto seja recuperado pela coleta de lixo.
FindControl (String) Procura no contêiner de nomeação atual por um controle de servidor com o parâmetro de identificação especificado.
FindControl (String, Int32) Pesquisa o contêiner de nomeação atual para um controle de servidor com o ID especificado e um número inteiro.
Foco Define o foco de entrada para um controle.
GetDesignModeState Obtém dados em tempo de design para um controle.
GetType Obtém o tipo da instância atual.
GetUniqueIDRelativeTo Retorna a parte prefixada da propriedade UniqueID do controle especificado.
HasControls Determina se o controle do servidor contém algum controle filho.
HasEvents Indica se os eventos são registrados para o controle ou qualquer controle filho.
IsLiteralContent Determina se o controle do servidor contém apenas conteúdo literal.
LoadControlState Restaura informações do estado de controle.
LoadViewState Restaura as informações do estado da exibição.
MapPathSecure Recupera o caminho físico para o qual um caminho virtual, absoluto ou relativo, mapeia.
MemberwiseClone Cria uma cópia superficial do objeto atual.
MergeStyle Copia quaisquer elementos não vazios do estilo especificado para o controle da Web, mas não substitui nenhum elemento de estilo existente do controle.
OnBubbleEvent Determina se o evento para o controle do servidor é passado na hierarquia de controle do servidor da UI da página.
OnDataBinding Gera o evento de ligação de dados.
OnInit Gera o evento Init.
OnLoad Gera o evento Load.
OnPreRender Gera o evento PreRender.
OnUnload Gera o evento Unload.
OpenFile Obtém um fluxo usado para ler um arquivo.
RemovedControl Chamado depois que um controle filho é removido da coleção de controles do objeto de controle.
Renderiza o controle para o gravador HTML especificado.
RenderBeginTag Renderiza a marca de abertura HTML do controle no gravador especificado.
RenderChildren Produz o conteúdo dos filhos de um controle de servidor para um
RenderChildren Exibe o conteúdo dos filhos de um controle de servidor para um objeto HtmlTextWriter fornecido, que grava o conteúdo a ser renderizado no cliente.
RenderContents Renderiza o conteúdo do controle para o gravador especificado.
RenderControl (HtmlTextWriter) Produz conteúdo de controle do servidor para um objeto HtmlTextWriter fornecido e armazena informações de rastreamento sobre o controle se o rastreamento estiver ativado.
RenderEndTag Renderiza a marca de fechamento HTML do controle no gravador especificado.
ResolveAdapter Obtém o adaptador de controle responsável por renderizar o controle especificado.
SaveControlState Salva todas as alterações de estado de controle do servidor que ocorreram desde o momento em que a página foi postada de volta no servidor.
SaveViewState Salva qualquer estado que foi modificado depois que o método TrackViewState foi chamado.
SetDesignModeState Define os dados em tempo de design para um controle.
ToString Retorna uma string que representa o objeto atual.
TrackViewState Faz com que o controle rastreie as alterações em seu estado de exibição, para que possam ser armazenadas na propriedade de estado de exibição do objeto.

Como os controles são renderizados:

A tabela abaixo é de conhecimento fundamental especialmente quando você tem que aplicar uma CSS personalizada em um item específico.
Cada controle ASP NET tem um parâmetro especifico chamado CSSClass que aplica uma classe ao controle ASP NET. Isto atende 95% das necessidades mas há casos que precisamos personalizar o item.

Nome do Controle Tag HTML
HtmlHead <head> element
HtmlInputButton <input type=button|submit|reset>
HtmlInputCheckbox <input type=checkbox>
HtmlInputFile <input type=file>
HtmlInputHidden <input type=hidden>
HtmlInputImage <input type=image>
HtmlInputPassword <input type=password>
HtmlInputRadioButton <input type=radio>
HtmlInputReset <input type=reset>
HtmlText <input type=text ou input type=password>
HtmlImage TAG <img>
HtmlLink TAG <link>
HtmlAnchor TAG <a>
HtmlButton TAG <button>
HtmlForm TAG <form>
HtmlTable TAG <table>
HtmlTableCell TAG <td> e TAG <th>
HtmlTableRow TAG <tr>
HtmlTitle TAG <title>
HtmlSelect TAG <select>
HtmlGenericControl Todos os controles HTML não listados